import React, { Component } from 'react';
import { List } from '$yo-component';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';

import fetch from "isomorphic-fetch"

class Detail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: [1]
        };
    }
    componentWillMount(){
        console.log(this.state.dataSource)
        fetch("../mock/project.json")
        .then(result => {
            return result.json()
        })
        .then(res =>{
            this.setState({
                dataSource:res
            })
        })
    }
   

    render() {
        var content = this.state.dataSource[0];
        console.log(this.state.dataSource)
        return (
            <div className="yo-flex">
                <Header title="项目分享" right={{ title: '首页', onTap: () => yoHistory.push("/") }}/>
                <Scroller extraClass="flex">
                    <div className="yo-card">
                        <div className="extra">
                            <img className="img-cover" src="http://pic5.duowan.com/psp/1005/138297782616/138298560095.jpg" alt="示例图片" />
                        </div>
                        <div className="bd">
                            <div><b>项目简介：</b><p>{content.description}</p></div>
                            <div><b>技术体系：</b><p>{content.tech}</p></div>
                            <div><b>功能模块：</b><p>{content.function}</p></div>
                            <div><b>开发周期：</b><p>{content.detail}</p></div>
                            <div><b>技术难点：</b><p>{content.difficult}</p></div>
                            <div><b>解决方案：</b><p>{content.resolvent}</p></div>
                            <div><b>团队成员：</b><p>{content.team}</p></div>
                        </div>
                    </div>
                </Scroller>
            </div>
        )
    }
}


export default Detail;
